<!--
 * @Description: 
 * @Date: 2023-03-30 09:34:47
 * @LastEditors: czp
 * @LastEditTime: 2023-03-30 10:05:19
-->
<template>
	<canvas ref="qrcodeRef" id="qrcode"></canvas>
</template>
<script setup lang="ts" name="Qrcode">
import qrcode from "qrcode";

interface IQrcode {
	code: string; //必传  二维码内容
	width?: number | string; // 非必传 二维码宽度 默认（200）
}

const props = withDefaults(defineProps<IQrcode>(), {
	width: 200
});

// canvas ref
const qrcodeRef = ref();

/**
 * 创建二维码
 */
const createQrcode = async () => {
	try {
		await qrcode.toCanvas(qrcodeRef.value, props.code, { errorCorrectionLevel: "M", width: Number(props.width) });
	} catch (error) {}
};

onMounted(() => {
	createQrcode();
});
</script>
<style lang="scss" scoped>
#qrcode {
	width: 200px;
	height: 200px;
}
</style>
